<template>
    <!-- 会议预约管理 -->
    <div class="meeting-room-management">
        <h2>会议预约</h2>
        <!--查询条件-->
        <div class="filter-bar">
            <input type="text" v-model="GetMeetAppNum.meetingName" placeholder="请输入会议室名称" />
            <button class="primary-button" @click="">查询</button>
            <button class="secondary-button" @click="">重置</button>
        </div>
        <div class="action-bar">
            <el-button type="primary" @click="dialogVisible = true">新增</el-button>
        </div>
        <!--数据展示-->
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="meetingId" label="序号" width="60" />
            <el-table-column prop="createMeetingTime" label="会议时间" width="200" />
            <el-table-column prop="meetingName" label="会议名称" width="100" />
            <el-table-column prop="meetingStatus" label="会议状态" width="100">
                <template v-slot="scope">
                    <el-tag v-if="scope.row.meetingStatus === true" type="success">已预约</el-tag>
                    <el-tag v-else type="danger">已取消</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="meetingRoomManager" label="会议室管理员" width="100" />
            <el-table-column prop="meetingRoom" label="会议室" width="100" />
            <el-table-column prop="meetingTopic" label="会议主题" width="100" />
            <el-table-column label="操作">
                <template v-slot="scope">
                    <el-text class="mx-1" @click="MeetingdetailsdialogVisible = true, MeetingDetails(scope.row)"
                        type="primary">会议详情</el-text>&nbsp;&nbsp;
                    <el-text class="mx-1" v-if="scope.row.savedSuccessfully" type="success"
                        @click="UpdatedialogVisible = true, UpdMeetingAppointment(scope.row)">
                        修改会议
                    </el-text>
                    <el-text class="mx-1" v-if="!scope.row.savedSuccessfully" type="info">修改会议</el-text>
                    &nbsp;&nbsp;
                    <el-text class="mx-1" v-if="!scope.row.savedSuccessfully" @click="MeetingMinutesdialogVisible = true, MeetingMinutes(scope.row)"
                        type="danger">会议纪要</el-text>
                        <el-text class="mx-1" v-if="scope.row.savedSuccessfully" type="info">会议纪要</el-text>
                </template>
            </el-table-column>
        </el-table>
        <!--底部操作-->
        <div class="footer-bar">
            <div class="batch-actions">
                <label for="select-all-footer">选择全部</label>
                <button class="secondary-button">全部删除</button>
                <button class="secondary-button">反向选择</button>
                <button class="secondary-button">更多操作</button>
                <!--分页-->
                <Pagination :pageIndex="GetMeetAppNum.pageIndex" :pageSize="GetMeetAppNum.pageSize"
                    :count="pageNum.count" :pcount="pageNum.pcount" v-on:pagination="pageWay" />
            </div>
        </div>
    </div>
    <!--新增会议-->
    <div>
        <el-dialog v-model="dialogVisible" title="会议预约" width="800">
            <el-form :model="ruleForm" :rules="rules" ref="formRef" label-width="120px">
                <!-- 基本信息 -->
                <div class="section-title">
                    <span class="left-border"></span>
                    <span>基本信息</span>
                </div>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="会议模板：" prop="template">
                            <el-input v-model="ruleForm.meetingTemplate" placeholder="请选择会议模板" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="会议主题：" prop="topic">
                            <el-input v-model="ruleForm.meetingTopic" placeholder="请输入会议主题" />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="会议地点：" prop="location">
                            <el-select v-model="ruleForm.meetingRoom" placeholder="请选择会议室">
                                <el-option v-for="item in GetMeetRoomNum" :label="item.meetingRoomName"
                                    :value="item.meetingRoomName" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="主持人：" prop="host">
                            <el-input v-model="ruleForm.userName" placeholder="主持人" />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="会议时间：" prop="time">
                            <el-time-picker v-model="StartAndEndTime.start" placeholder="开始时间" />
                            <span style="margin: 0 8px">—</span>
                            <el-time-picker v-model="StartAndEndTime.end" placeholder="结束时间" />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item label="会议参与人：" prop="participants">
                    <el-input v-model="ruleForm.meetingParticipants" placeholder="参与人" />
                </el-form-item>

                <el-form-item label="会议内容：" prop="content">
                    <el-input type="textarea" v-model="ruleForm.meetingDetailsContent" placeholder="会议内容" />
                </el-form-item>

                <!-- 会议设置 -->
                <div class="section-title">
                    <span class="left-border"></span>
                    <span>会议设置</span>
                </div>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="会议签到：" prop="meetingCheckIn">
                            <el-radio-group v-model="ruleForm.meetingCheckIn">
                                <el-radio :value="true">是</el-radio>
                                <el-radio :value="false">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="会议口令：" prop="conferencePassword">
                            <el-radio-group v-model="ruleForm.conferencePassword">
                                <el-radio :value="true">开启</el-radio>
                                <el-radio :value="false">关闭</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="短信通知：" prop="smsNotification">
                            <el-radio-group v-model="ruleForm.smsNotification">
                                <el-radio :value="true">是</el-radio>
                                <el-radio :value="false">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="是否远程会议：" prop="remoteMeeting">
                            <el-radio-group v-model="ruleForm.remoteMeeting">
                                <el-radio :value="true">是</el-radio>
                                <el-radio :value="false">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <!-- 底部按钮 -->
            <template #footer>
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button @click="">保存为模板</el-button>
                <el-button type="primary" @click="handleSave">确定</el-button>
            </template>
        </el-dialog>
        <!-- 还可以放表单校验或其他组件 -->
    </div>
    <!--会议详情-->
    <el-dialog v-model="MeetingdetailsdialogVisible" fullscreen>
        <div>
            <div class="details-card">
                <section class="info-section">
                    <div style="background-color: #F9F9F9;height: 50px;">
                        <span class="left-border"></span>
                        <span>会议详情</span>
                        <el-button type="primary" style="float: right;" @click="MeetingdetailsdialogVisible = false"
                            round>返回</el-button>
                    </div>
                    <div class="section-title">
                        <span class="left-border"></span>
                        <span>基本信息</span>
                    </div>
                    <div class="info-grid">
                        <div class="info-item">
                            <span class="label">会议名称:</span>
                            <span class="value">{{ MeetingDetailsNum.meetingName }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">会议时间:</span>
                            <span class="value">{{ MeetingDetailsNum.createMeetingTime }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">会议地点:</span>
                            <span class="value">{{ MeetingDetailsNum.meetingRoom }}</span>
                        </div>
                        <div class="info-item full-width attendees-item">
                            <span class="label">参会人员:</span>
                            <div class="value">
                                <span>
                                    <el-tag type="success" v-for="item in MeetingDetailsNum.meetingParticipants">
                                        <span>{{ item }}&nbsp;&nbsp;</span>
                                    </el-tag>
                                </span>
                            </div>
                        </div>
                        <div class="info-item full-width">
                            <span class="label">线上地址:</span>
                            <a href="">{{ MeetingDetailsNum.meetingAddress }}</a>
                            <span class="label">会议电话:</span>
                            <span class="value">{{ MeetingDetailsNum.meetingTel }}</span>
                        </div>
                    </div>
                </section>

                <div class="section-title">
                    <span class="left-border"></span>
                    <span>会议内容</span>

                </div>
                <div class="info-item full-width attendees-item">
                    <span>
                        {{ MeetingDetailsNum.meetingDetailsContent }}
                    </span>
                </div>
                <section class="info-section attachments-section">
                    <span class="label">会议附件:</span>
                    <span class="value">
                        <a href="">{{ MeetingDetailsNum.meetingAttachments }}</a>
                    </span>
                </section>
            </div>
        </div>
    </el-dialog>
    <!--修改会议-->
    <div>
        <el-dialog v-model="UpdatedialogVisible" title="会议预约" width="800">
            <el-form :model="ruleForm" :rules="rules" ref="formRef" label-width="120px">
                <!-- 基本信息 -->
                <div class="section-title">
                    <span class="left-border"></span>
                    <span>基本信息</span>
                </div>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="会议模板：" prop="template">
                            <el-input v-model="UpdMeetingNum.meetingTemplate" placeholder="请选择会议模板" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="会议主题：" prop="topic">
                            <el-input v-model="UpdMeetingNum.meetingTopic" placeholder="请输入会议主题" />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="会议地点：" prop="location">
                            <el-select v-model="UpdMeetingNum.meetingRoom" placeholder="请选择会议室">
                                <el-option v-for="item in GetMeetRoomNum" :label="item.meetingRoomName"
                                    :value="item.meetingRoomName" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="主持人：" prop="host">
                            <el-input v-model="UpdMeetingNum.userName" placeholder="主持人" />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="会议时间：" prop="time">
                            <el-time-picker v-model="UpdMeetingNum.createMeetingTime" placeholder="开始时间" />
                            <span style="margin: 0 8px">—</span>
                            <el-time-picker v-model="UpdMeetingNum.meetingTime" placeholder="结束时间" />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item label="会议参与人：" prop="participants">
                    <el-input v-model="UpdMeetingNum.meetingParticipants" placeholder="参与人" />
                </el-form-item>

                <el-form-item label="会议内容：" prop="content">
                    <el-input type="textarea" v-model="UpdMeetingNum.meetingDetailsContent" placeholder="会议内容" />
                </el-form-item>

                <!-- 会议设置 -->
                <div class="section-title">
                    <span class="left-border"></span>
                    <span>会议设置</span>
                </div>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="会议签到：" prop="meetingCheckIn">
                            <el-radio-group v-model="UpdMeetingNum.meetingCheckIn">
                                <el-radio :value="true">是</el-radio>
                                <el-radio :value="false">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="会议口令：" prop="conferencePassword">
                            <el-radio-group v-model="UpdMeetingNum.conferencePassword">
                                <el-radio :value="true">开启</el-radio>
                                <el-radio :value="false">关闭</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="短信通知：" prop="smsNotification">
                            <el-radio-group v-model="UpdMeetingNum.smsNotification">
                                <el-radio :value="true">是</el-radio>
                                <el-radio :value="false">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="是否远程会议：" prop="remoteMeeting">
                            <el-radio-group v-model="UpdMeetingNum.remoteMeeting">
                                <el-radio :value="true">是</el-radio>
                                <el-radio :value="false">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <!-- 底部按钮 -->
            <template #footer>
                <el-button @click="UpdatedialogVisible = false">取消</el-button>
                <el-button @click="">保存为模板</el-button>
                <el-button type="primary" @click="UpdatedialogVisible = false">确定</el-button>
            </template>
        </el-dialog>
        <!-- 还可以放表单校验或其他组件 -->
    </div>
    <!--会议纪要-->
    <el-dialog v-model="MeetingMinutesdialogVisible" fullscreen>
        <div>
            <div class="details-card">
                <section class="info-section">
                    <div style="background-color: #F9F9F9;height: 50px;">
                        <span class="left-border"></span>
                        <span>会议纪要</span>
                        <el-button type="primary" style="float: right;" @click="MeetingMinutesdialogVisible = false"
                            round>返回</el-button>
                    </div>
                    <div class="section-title">
                        <span class="left-border"></span>
                        <span>基本信息</span>
                    </div>
                    <div class="info-grid">
                        <div class="info-item">
                            <span class="label">会议名称:</span>
                            <span class="value">{{ MeetingMinutesNum.meetingName }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">会议时间:</span>
                            <span class="value">{{ MeetingMinutesNum.createMeetingTime }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">会议地点:</span>
                            <span class="value">{{ MeetingMinutesNum.meetingRoom }}</span>
                        </div>
                        <div class="info-item full-width attendees-item">
                            <span class="label">参会人员:</span>
                            <div class="value">
                                <span>
                                    <el-tag type="success" v-for="item in MeetingMinutesNum.meetingParticipants">
                                        <span>{{ item }}&nbsp;&nbsp;</span>
                                    </el-tag>
                                </span>
                            </div>
                        </div>
                        <div class="info-item">
                            <span class="label">主持人:</span>
                            <span class="value">{{ MeetingMinutesNum.userName }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">记录人:</span>
                            <span class="value">{{ MeetingMinutesNum.recorder }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">决策人:</span>
                            <span class="value">{{ MeetingMinutesNum.decisionMaker }}</span>
                        </div>
                    </div>
                </section>

                <div class="section-title">
                    <span class="left-border"></span>
                    <span>会议内容</span>

                </div>
                <div class="info-item full-width attendees-item">
                    <span>
                        {{ MeetingMinutesNum.meetingMinutesContent }}
                    </span>
                </div>
                <section class="info-section attachments-section">
                    <span class="label">会议附件:</span>
                    <span class="value">
                        <a href="">{{ MeetingMinutesNum.meetingAttachments }}</a>
                    </span>
                </section>
                <div>
                    <el-checkbox v-model="isSavedSuccessfully" label="" size="large" />
                    <span>保存成功后，自动通过邮件的方式将会议纪要发送给参会人员</span>
                </div>
            </div>
        </div>
        <div style="float: right;">
            <el-button type="primary" @click="MeetingMinutesdialogVisible = false">关闭</el-button>
            <el-button type="success" @click="MeetingMinutessubmit(), MeetingMinutesdialogVisible = false">
                保存
            </el-button>
        </div>
    </el-dialog>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, watch } from 'vue';
import Pagination from '@/components/icons/Pagination.vue';
import MeetDialog from './AddMeetDialogView.vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { useCounterStore } from '@/stores/counter';
// 导入API接口
import {
    GetMeetAppointment,
    AddMeetAppointment,
    GetMeetRoomAppoint
} from '../../api/Appointment';
import type { ITEM_RENDER_EVT } from 'element-plus/es/components/virtual-list/src/defaults.mjs';
// 页面加载时执行
onMounted(async () => {
    GetMeetAppWay()
    GetMeetRoomWay()
})
//pinia
const route = useCounterStore();
//会议纪要
const MeetingMinutesdialogVisible = ref(false)
// 会议详情
const MeetingdetailsdialogVisible = ref(false)
// 新增会议室
const dialogVisible = ref(false)
// 修改会议室
const UpdatedialogVisible = ref(false)
// 是否选中
const isSavedSuccessfully = ref(true)
// 表格数据
const tableData = ref([{}])
// 修改会议室
const UpdMeetingNum = ref({
    "createMeetingTime": "2025-06-06T09:24:29.153Z",
    "meetingTime": "2025-06-06T09:24:29.153Z",
    "meetingName": "string",
    "meetingTemplate": "string",
    "meetingStatus": true,
    "meetingRoomManager": "string",
    "meetingRoom": "string",
    "userName": "string",
    "meetingTopic": "string",
    "meetingParticipants": "string",
    "meetingTel": "14228026549",
    "meetingAddress": "string",
    "meetingDetailsContent": "string",
    "meetingAttachments": "string",
    "meetingCheckIn": true,
    "conferencePassword": true,
    "smsNotification": true,
    "remoteMeeting": true,
    "isDeleted": true,
    "operatorName": "string"
})
//获取会议室信息，绑定下拉框
const GetMeetRoomNum = ref([{
    meetingRoomName: "",
}])
// 会议纪要数据
const MeetingMinutesNum = ref({
    meetingName: "",
    createMeetingTime: "",
    meetingRoom: "",
    meetingParticipants: [String],
    recorder: "",
    decisionMaker: "",
    meetingAttachments: "",
    MeetingMinutesContent: "",
    savedSuccessfully: false,
    userName: "",
    meetingMinutesContent: ""
})
// 会议详情数据
const MeetingDetailsNum = ref({
    meetingName: "",
    createMeetingTime: "",
    meetingRoom: "",
    meetingParticipants: [String],
    meetingAddress: "",
    meetingTel: "",
    meetingDetailsContent: "",
    meetingAttachments: ""
})
// 开始时间和结束时间
const StartAndEndTime = ref({
    start: new Date(), // 开始时间
    end: new Date() // 结束时间
})
//会议预约分页数据
const GetMeetAppNum = reactive({
    "pageIndex": 1,
    "pageSize": 10,
    "meetingName": ""
})
// 分页数据
const pageNum = ref({
    count: 0,
    pcount: 0
})
// 表单数据
const ruleForm = reactive({
    "createMeetingTime": "2025-06-04T13:18:32.650Z",
    "meetingTime": "2025-06-04T13:18:32.650Z",
    "meetingName": "string",
    "meetingTemplate": "",
    "meetingStatus": true,
    "meetingRoomManager": "",
    "meetingRoom": "",
    "userName": "",
    "meetingTopic": "",
    "meetingParticipants": "",
    "meetingTel": route.userInfo.userTelephone,
    "meetingAddress": "",
    "meetingDetailsContent": "",
    "meetingAttachments": "",
    "meetingCheckIn": true,
    "conferencePassword": true,
    "smsNotification": true,
    "remoteMeeting": true,
    "isDeleted": true,
    "operatorName": route.userInfo.idNumber
})
//向父组件传递分页数据
const pageWay = (pageIndex: number, pageSize: number) => {
    GetMeetAppNum.pageIndex = pageIndex;
    GetMeetAppNum.pageSize = pageSize;
    GetMeetAppWay()
}
// 获取会议预约信息
const GetMeetAppWay = async () => {
    try {
        const res = await GetMeetAppointment(GetMeetAppNum)
        //console.log(res.data.data.data)
        tableData.value = res.data.data.data
        pageNum.value.count = res.data.data.count
        pageNum.value.pcount = res.data.data.pcount
    } catch (error) {
        ElMessage.error("????")
    }
}
// 表单校验规则
const rules = reactive<FormRules>({
})
// 新增会议室按钮
const handleSave = async () => {
    ruleForm.createMeetingTime = StartAndEndTime.value.end.toISOString()
    ruleForm.meetingTime = StartAndEndTime.value.start.toISOString()
    dialogVisible.value = false
    try {
        //
        const way = await AddMeetAppointment(ruleForm)
        if (way.data.success) {
            ElMessage.success(way.data.message)
            GetMeetAppWay()
        } else {
            ElMessage.error(way.data.message)
        }
        //console.log(way.data)
    }
    catch (error) {
        console.error('Error:', error)
    }
}
// 取消弹窗
const handleCancel = () => {
    console.log('点击退出，取消了弹窗')
}
// 会议详情
const MeetingDetails = (data: any) => {
    MeetingDetailsNum.value.meetingName = data.meetingName
    MeetingDetailsNum.value.createMeetingTime = data.createMeetingTime
    MeetingDetailsNum.value.meetingRoom = data.meetingRoom
    MeetingDetailsNum.value.meetingAddress = data.meetingAddress
    MeetingDetailsNum.value.meetingTel = data.meetingTel
    MeetingDetailsNum.value.meetingDetailsContent = data.meetingDetailsContent
    MeetingDetailsNum.value.meetingAttachments = data.meetingAttachments
    MeetingDetailsNum.value.meetingParticipants = data.meetingParticipants.split(',')
}
// 会议纪要
const MeetingMinutes = (data: any) => {
    //console.log(data.meetingMinutesContent)
    MeetingMinutesNum.value.meetingName = data.meetingName
    MeetingMinutesNum.value.createMeetingTime = data.createMeetingTime
    MeetingMinutesNum.value.meetingRoom = data.meetingRoom
    MeetingMinutesNum.value.meetingParticipants = data.meetingParticipants.split(',')
    MeetingMinutesNum.value.recorder = data.recorder
    MeetingMinutesNum.value.decisionMaker = data.decisionMaker
    MeetingMinutesNum.value.meetingMinutesContent = data.meetingMinutesContent
    MeetingMinutesNum.value.meetingAttachments = data.meetingAttachments
    MeetingMinutesNum.value.userName = data.userName
}
// 获取会议室信息
const GetMeetRoomWay = async () => {
    const res = await GetMeetRoomAppoint()
    GetMeetRoomNum.value = res.data.data
}
// 提交会议纪要
const MeetingMinutessubmit = () => {
    ElMessage.success('会议纪要已保存！');
}
// 修改会议预约
const UpdMeetingAppointment = async (data: any) => {
    UpdMeetingNum.value.createMeetingTime = data.createMeetingTime
    UpdMeetingNum.value.meetingTime = data.meetingTime
    UpdMeetingNum.value.meetingName = data.meetingName
    UpdMeetingNum.value.meetingTemplate = data.meetingTemplate
    UpdMeetingNum.value.meetingStatus = data.meetingStatus
    UpdMeetingNum.value.meetingRoomManager = data.meetingRoomManager
    UpdMeetingNum.value.meetingRoom = data.meetingRoom
    UpdMeetingNum.value.userName = data.userName
    UpdMeetingNum.value.meetingTopic = data.meetingTopic
    UpdMeetingNum.value.meetingParticipants = data.meetingParticipants
    UpdMeetingNum.value.meetingTel = data.meetingTel
    UpdMeetingNum.value.meetingAddress = data.meetingAddress
    UpdMeetingNum.value.meetingDetailsContent = data.meetingDetailsContent
    UpdMeetingNum.value.meetingAttachments = data.meetingAttachments
    UpdMeetingNum.value.meetingCheckIn = data.meetingCheckIn
    UpdMeetingNum.value.conferencePassword = data.conferencePassword
    UpdMeetingNum.value.smsNotification = data.smsNotification
    UpdMeetingNum.value.remoteMeeting = data.remoteMeeting
    UpdMeetingNum.value.isDeleted = data.isDeleted
    UpdMeetingNum.value.operatorName = route.userInfo.idNumber

}
</script>
<style scoped>
.meeting-room-management {
    padding: 20px;
    font-family: 'Microsoft YaHei', sans-serif;
    color: #333;
    background-color: #f5f7fa;
    /* 模仿背景色 */
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin: 20px;
}

.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}

.filter-bar,
.action-bar {
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.filter-bar input[type="text"] {
    padding: 8px 12px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    width: 200px;
}

h2 {
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 600;
    border-bottom: 1px solid #ebeef5;
    padding-bottom: 15px;
}

.back-button:hover {
    background-color: #66b1ff;
}

.details-card {
    background-color: #ffffff;
    /* 卡片背景色 */
    border: 1px solid #e4e7ed;
    /* 卡片边框 */
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
    /* 轻微阴影 */
}

.info-section {
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f2f5;
    /* 分隔线 */
}

.info-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.section-title {
    font-size: 16px;
    font-weight: bold;
    color: #303133;
    margin-top: 0;
    margin-bottom: 20px;
    /* 图片中标题前似乎没有特殊标记，保持简洁 */
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    /* 响应式列 */
    gap: 15px 20px;
    /* 行间距 列间距 */
    font-size: 14px;
    line-height: 1.6;
}

.info-item {
    display: flex;
    /* 用于标签和内容的对齐 */
    flex-direction: row;
    /* 默认值，标签和内容在一行 */
    align-items: flex-start;
    /* 顶部对齐 */
}

.info-item .label {
    color: #606266;
    /* 标签颜色 */
    margin-right: 8px;
    white-space: nowrap;
    /* 标签不换行 */
    flex-shrink: 0;
    /* 防止标签被压缩 */
}

.info-item .value {
    color: #303133;
    /* 内容颜色 */
    word-break: break-all;
    /* 长链接或文本换行 */
}

.info-item.full-width {
    grid-column: 1 / -1;
    /* 占满整行 */
}

.info-item.attendees-item .value {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.attendee-tag {
    background-color: #f0f5ff;
    /* 类似图片的浅蓝色/灰色背景 */
    color: #409EFF;
    /* 标签文字颜色 */
    border: 1px solid #d9ecff;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 13px;
    white-space: nowrap;
}

.meeting-content-list {
    padding-left: 20px;
    /* 给ol的数字留出空间 */
    font-size: 14px;
    color: #303133;
    line-height: 1.8;
}

.meeting-content-list li {
    margin-bottom: 8px;
}

.attachments-section {
    font-size: 14px;
}

.attachments-section .label {
    color: #606266;
    margin-right: 8px;
}

a {
    color: #409EFF;
    /* 链接颜色 */
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

button {
    padding: 8px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s, color 0.3s;
}

.primary-button {
    background-color: #409eff;
    color: white;
}

.primary-button:hover {
    background-color: #66b1ff;
}

.secondary-button {
    background-color: #fff;
    color: #606266;
    border: 1px solid #dcdfe6;
}

.secondary-button:hover {
    background-color: #ecf5ff;
    color: #409eff;
    border-color: #c6e2ff;
}

.danger-button {
    background-color: #f56c6c;
    color: white;
}

.danger-button:hover {
    background-color: #f78989;
}

.footer-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding: 10px 0;
}

.batch-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #606266;
}

.batch-actions input[type="checkbox"] {
    margin-right: 5px;
}

.section-title {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 16px;
    margin: 24px 0 12px;
    color: #303133;
}

.left-border {
    width: 4px;
    height: 20px;
    background-color: #409EFF;
    /* Element Plus 蓝 */
    margin-right: 8px;
    border-radius: 2px;
}
</style>
